<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            img {
                width: 300px;
                height: 300px;
                display: block;
                animation: move 0.6s linear infinite;
                transition: all 0.3s;
                position: absolute;
                top:0;left:0;
                bottom:0;right:0;
                margin: auto;
            }

            @keyframes move {
                0% {
                    transform: translate(0, 0);
                }
                50% {
                    transform: translate(-3px, -10px);
                }
                100% {
                    transform: translate(0, 0);
                }
            }
            img:hover{
                animation-play-state: paused;/*暂停*/
            }
        </style>
    </head>
    <body>
        <img src="img/1.jpg" alt="">
    </body>
</html>